<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 注意: 有了ajax之后,基本上不再使用form的默认行为给服务器发送请求,都是使用ajax.因为使用ajax更加灵活 -->
    <form id="form">
      用户名: <input type="text" id="username" name="username" /> <br />
      密码: <input type="text" id="password" name="password" />
      <button id="btn">按钮</button>
    </form>

    <script>
      btn.onclick = function (e) {
        e.preventDefault() //阻止form表单的默认行为
        // 发送ajax请求
        const xhr = new XMLHttpRequest()
        xhr.open('get', `http://localhost:5000/test`)
        // 设置超时时间
        xhr.timeout = 3000
        xhr.ontimeout = function () {
          // 当ajax请求超时的时候触发
          alert('超时了')
        }

        // 设置请求头
        // xhr.setRequestHeader(
        //   'content-type',
        //   'application/x-www-form-urlencoded'
        // )

        // 拼接表单中的数据格式: 键=值&键=值
        // 获取表单元素
        // const username = document.querySelector('#username')
        // const password = document.querySelector('#password')
        // const un = username.value.trim()
        // const pd = password.value.trim()
        // const data = `username=${un}&password=${pd}`

        // 使用formdata
        const form = document.querySelector('#form')
        const formdata = new FormData(form)
        // 往formdata中添加一些额外的数据
        formdata.append('xxx', 999)

        // console.log(formdata) //注意: 直接打印formdata什么都看不到
        // console.log(formdata.get('username')) //返回的是属性name的值为username那个表单元素的值
        // console.log(formdata.get('password')) //返回的是属性name的值为password那个表单元素的值
        // console.log(formdata.get('xxx')) //返回的是额外添加的属性xxx的值

        //发送请求,就直接将formdata对象,传入到send中即可
        xhr.send(formdata)
        // 接收响应
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              console.log(xhr.responseText)
            } else {
              console.log('失败了')
            }
          }
        }
      }
    </script>
  </body>
</html>
